<template>
	<div class="app-container findGoods-container">
		<div class="filter-container">
			<el-select v-model="listQuery.id_public_goods_type" placeholder="一级分类" clearable
				class="filter-item select-item" @change="selectTypeFather" @clear="clearTypeFather">
				<el-option v-for="item in typeFather" :key="item.id_public_goods_type" :label="item.type_name"
					:value="item.id_public_goods_type" />
			</el-select>
			<el-select v-model="listQuery.type_child" :disabled="childDisable" placeholder="二级分类" clearable
				class="filter-item select-item" @clear="handleFilter">
				<el-option v-for="item in typeChild" :key="item.id_public_goods_type" :label="item.type_name"
					:value="item.id_public_goods_type" />
			</el-select>
			<el-select v-model="listQuery.pre_db_para_is_online" placeholder="绑定状态" clearable
				class="filter-item select-item" @clear="handleFilter">
				<el-option v-for="item in statusOptions" :key="item.key" :label="item.name" :value="item.key" />
			</el-select>
			<el-input v-model="goods_name" placeholder="商品名称" clearable class="filter-item input-item"
				style="width: 200px;" @clear="handleFilter" @keyup.enter.native="handleFilter" />
			<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
				搜索
			</el-button>
		</div>

		<div class="page-content">
			<el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row
				style="width: 100%;" @selection-change="handleSelectionChange">
				<el-table-column label="商品ID/商品名称" align="center">
					<template slot-scope="{row}">
						<span>{{ row.id_public_goods_info }} / {{ row.goods_name }}</span>
					</template>
				</el-table-column>
				<el-table-column label="一级/二级类" align="center">
					<template slot-scope="{row}">
						<span>{{ row.type_name }} / {{ row.child_name }}</span>
					</template>
				</el-table-column>
				<el-table-column label="零售规格" align="center">
					<template slot-scope="{row}">
						<span>{{ row.sales_describe }}</span>
					</template>
				</el-table-column>
				<el-table-column label="源价/供价/零售" align="center">
					<template slot-scope="{row}">
						<span>{{ row.price_4_supply_buy }}/{{ row.price_4_shop_buy }}/{{ row.price_4_shop_retail
							}}</span>
					</template>
				</el-table-column>
				<el-table-column label="库存" align="center">
					<template slot-scope="{row}">
						<span>{{ row.publicGoodsSupply4Agent.supply_left_count }}</span>
					</template>
				</el-table-column>
				<el-table-column label="注册状态" align="center" width="100" class-name="small-padding fixed-width">
					<template slot-scope="{row}">
						<el-switch v-model="row.publicGoodsSupply4Agent.is_online" inactive-color="#ff4949"
							:active-value="0" :inactive-value="1" @change="handleBind(row)" />
					</template>
				</el-table-column>
			</el-table>
		</div>
		<pagination v-show="total > 0" :total="total" :page.sync="currentPage" :limit.sync="listQuery.limit" @pagination="getPageList" />

		<el-dialog title="商品注册" :visible.sync="dialogFormVisible" width="45%" :close-on-click-modal="false">
			<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="100px">
				<el-row :gutter="40">
					<el-col :span="12">
						<el-form-item label="商品名称">
							<el-input v-model="temp.goods_name" readonly placeholder="请输入门店名称" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="零售价" prop="price_4_shop_retail">
							<el-input v-model="temp.price_4_shop_retail" placeholder="请输入零售价" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="40">
					<el-col :span="12">
						<el-form-item label="门店采购价" prop="price_4_shop_buy">
							<el-input v-model="temp.price_4_shop_buy" placeholder="请输入门店采购价" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="供应成本价" prop="price_4_supply_buy">
							<el-input v-model="temp.price_4_supply_buy" placeholder="请输入供应成本价" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="40">
					<el-col :span="12">
						<el-form-item label="仓库库存" prop="shop_left_count">
							<el-input v-model="temp.publicGoodsSupply4Agent.supply_left_count" placeholder="请输入仓库库存" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="警戒库存" prop="shop_left_count">
							<el-input v-model="temp.publicGoodsSupply4Agent.supply_alert_stock_num"
								placeholder="请输入警戒库存" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="handleCancel">
					取消
				</el-button>
				<el-button type="primary" @click="handleSure">
					确认
				</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
// import { warehouseList } from '@/api/warehouse'
import { goodsList } from '@/api/goods'

export default {
	name: 'FindGoods',
	components: { Pagination },
	directives: { waves },
	filters: {
		statusFilter (status) {
			const statusMap = {
				published: 'success',
				draft: 'info',
				deleted: 'danger'
			}
			return statusMap[status]
		}
	},
	data () {
		const validateNumber = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请正确的库存数据'))
			} else if (!(/^(0|[1-9][0-9]*)$/.test(value))) {
				this.temp.shop_left_count = ''
				callback(new Error('库存数据不正确, 仅限数字'))
			} else {
				callback()
			}
		}
		return {
			tableKey: 0,
			list: null,
			total: 0,
			listLoading: true,
			currentPage: 0,
			listQuery: {
				invoke_method: 'public_page_4m_agent_goods_list_2_reg',
				filter_type: 1,
				pre_db_para_begin_idx: 0,
				pre_db_para_length_4_list: 10,
				pre_db_para_is_online: null,
				id_public_goods_type: null,
				type_child: null
			},
			seller_id: null,
			goods_name: null,
			childDisable: true,
			typeFather: [],
			typeChild: [],
			bindQuery: {
				invoke_method: 'public_insert_or_update_goods_4_agent',
				id_public_goods_info: null,
				pre_db_spec_seller_id: null,
				is_online: null,
				price_4_shop_retail: null,
				price_4_shop_buy: null,
				price_4_supply_buy: null,
				supply_left_count: null,
				supply_alert_stock_num: null
			},
			statusOptions: [
				{ key: 0, name: '已绑定' },
				{ key: 1, name: '未绑定' }
			],
			/* 弹窗数据 */
			temp: {
				publicGoodsSupply4Agent: {
					supply_left_count: null,
					supply_alert_stock_num: null
				},
				price_4_shop_retail: null,
				price_4_shop_buy: null,
				price_4_supply_buy: null,
				is_online: null
			},
			dialogFormVisible: false,
			dialogStatus: '',
			textMap: {
				update: '编辑',
				create: '新增'
			},
			rules: {
				shop_left_count: [
					{ required: true, message: '请输入门店库存', trigger: 'blur' },
					{ validator: validateNumber, trigger: 'blur' }
				]
			}
		}
	},
	created () {
	},
	mounted () {
		if (this.$route.params) {
			this.seller_id = this.$route.params.id
		}
		this.getTypeFather()
		this.getList()
	},
	methods: {
		/*
		* 获取页面数据
		* */
    getList() {
      this.listLoading = true;
      let params;
      if (
        this.listQuery.pre_db_para_is_online === "0" ||
        !this.listQuery.pre_db_para_is_online
      ) {
        params = {
          pre_db_spec_seller_id: this.seller_id,
          invoke_method: "public_page_4m_agent_goods_list_2_reg",
          filter_type: this.listQuery.filter_type,
          pre_db_para_begin_idx: this.listQuery.pre_db_para_begin_idx,
          pre_db_para_length_4_list: this.listQuery.pre_db_para_length_4_list,
          "public_goods_supply_4_agent.is_online":
            this.listQuery.pre_db_para_is_online,
          "public_goods_info.goods_name": this.goods_name,
          'public_goods_info.id_public_goods_type': this.listQuery.id_public_goods_type,
          'public_goods_info.type_child': this.listQuery.type_child,
        };
      } else {
        params = {
          pre_db_spec_seller_id: this.seller_id,
          invoke_method: "public_page_4m_agent_goods_list_2_reg",
          filter_type: this.listQuery.filter_type,
          pre_db_para_begin_idx: this.listQuery.pre_db_para_begin_idx,
          pre_db_para_length_4_list: this.listQuery.pre_db_para_length_4_list,
          "public_goods_supply_4_agent.id_public_goods_supply_4_agent_is_null": true,
          "public_goods_info.goods_name": this.goods_name,
          'public_goods_info.id_public_goods_type': this.listQuery.id_public_goods_type,
          'public_goods_info.type_child': this.listQuery.type_child,
        };
      }
      goodsList(this.Qs.stringify(params)).then((response) => {
        this.list = response.page_content;
        this.total = response.result_num;

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false;
        }, 0.5 * 1000);
      });
    },

		/*
		* 获取一级分类数据
		* */
		getTypeFather () {
			goodsList(this.Qs.stringify({
				invoke_method: 'public_page_4m_load_main_cls',
				pre_db_para_is_online: 0,
				filter_type: 1,
        pre_cmd_para_show_admin_type: 'super_and_login',
				pre_db_para_begin_idx: 0,
				pre_db_para_length_4_list: 1000
			})).then(response => {
				this.typeFather = response.page_content
			})
		},
		selectTypeFather (val) {
			console.log(val)
			this.getTypeChild(val)
			this.childDisable = false
		},
		clearTypeFather () {
			this.childDisable = true
			this.listQuery.id_public_goods_type = null
			this.listQuery.type_child = null
			this.getList()
		},
		/*
		* 获取二级分类数据
		* */
		getTypeChild (id) {
			goodsList(this.Qs.stringify({
				invoke_method: 'public_page_4m_load_child_cls',
				is_online: 0,
				pre_db_para_begin_idx: 0,
				pre_db_para_length_4_list: 1000,
				type_father: id
			})).then(response => {
				this.typeChild = response.page_content
			})
		},

		/*
		* 点击分页进行查询
		* */
		getPageList (val) {
			this.listQuery.pre_db_para_begin_idx = (val.page - 1) * this.listQuery.pre_db_para_length_4_list
			this.getList()
		},
		/*
		* 查询数据
		* */
		handleFilter () {
			this.listQuery.pre_db_para_begin_idx = 0
			this.getList()
		},
		getSortClass: function (key) {
			const sort = this.listQuery.sort
			return sort === `+${key}` ? 'ascending' : 'descending'
		},

		/*
		* 选择数据
		* */
		handleSelectionChange (val) {
			console.log(val)
		},

		/*
		* 绑定操作
		* */
		handleCancel () {
			this.getList()
			this.dialogFormVisible = false
		},
		handleBind (item) {
			this.temp = Object.assign({}, item) // copy obj
			this.dialogFormVisible = true
			this.$nextTick(() => {
				this.$refs['dataForm'].clearValidate()
			})
		},
		handleSure () {
			this.bindQuery.id_public_goods_info = this.temp.id_public_goods_info
			this.bindQuery.is_online = this.temp.publicGoodsSupply4Agent.is_online
			this.bindQuery.price_4_shop_retail = this.temp.price_4_shop_retail
			this.bindQuery.price_4_shop_buy = this.temp.price_4_shop_buy
			this.bindQuery.price_4_supply_buy = this.temp.price_4_supply_buy
			this.bindQuery.supply_left_count = this.temp.publicGoodsSupply4Agent.supply_left_count
			this.bindQuery.supply_alert_stock_num = this.temp.publicGoodsSupply4Agent.supply_alert_stock_num
			this.bindQuery.pre_db_spec_seller_id = this.$route.query.agent_id

			console.log(this.bindQuery)

			goodsList(this.Qs.stringify(this.bindQuery)).then(response => {
				this.dialogFormVisible = false
				this.$notify({
					title: 'Success',
					message: '操作成功',
					type: 'success',
					duration: 2000
				})
				this.getList()
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.page-content {
	min-height: 500px;
}
</style>
